
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		#demo{
			background: #FFF;
			overflow:hidden;
			width: 1000px;
			margin: 33px auto;
		}
		#innerdemo{
			float: left;
			width: 300%;
		}
		#demo1,#demo2{
			margin-top: 5px;
			margin-bottom: 5px;
			overflow: hidden;
			float: left;
		}
		#demo1 li,#demo2 li{
			height: 190px;
			width: 190px;
			margin-top:10px;
			margin-bottom:10px;
			margin-left:10px;
			float: left;
			list-style: none;
		}
		img{
			width: 100%;
		}
		h1{
			text-align: center;
			margin-top: 66px;
		}
		</style>
	</head>
	<body>
		<h1>朋友你好，让你的眼睛放松一下</h1>
		<div id="demo">
			<div id="innerdemo">
				<ul id="demo1"></ul>
				<ul id="demo2"></ul>
			</div>
		</div>
		<script type="text/javascript">
		var speed = 10;
		var tab = document.getElementById('demo');
		var tab1 = document.getElementById('demo1');
		var imgs = new Array();
		imgs.push('./images/relax/1.jpg');
		imgs.push('./images/relax/2.jpg');
		imgs.push('./images/relax/3.jpg');
		imgs.push('./images/relax/4.jpg');
		imgs.push('./images/relax/5.jpg');
		var liStr = '';
		for(var i in imgs){
			liStr += '<li><img src="'+imgs[i]+'" /></li>';
		}
		tab1.innerHTML = liStr;
		var tab2 = document.getElementById('demo2');
		tab2.innerHTML = tab1.innerHTML;
		function marquee(){
			if(tab2.offsetWidth-tab.scrollLeft<=0){
				tab.scrollLeft -= tab1.offsetWidth;
			}else{
				tab.scrollLeft++;
			}
		}
		var mar = setInterval(marquee,speed);
		tab.onmouseover = function(){
			clearInterval(mar);
		};
		tab.onmouseout = function(){
			mar = setInterval(marquee,speed);
		};
		</script>
	</body>
</html>